<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#chart {
			width: 1500px;
			height: 1000px;
		}
	</style>
	<script src="js/echarts.js"></script>
</head>

<body>
	<div id="chart"></div>
	<script>
		var myChart = echarts.init(document.getElementById('chart'));
		myChart.setOption({
			backgroundColor: '#2c343c',

			title: {
				text: '访问来源',
				left: 'center',
				top: 20,
				textStyle: {
					color: '#ccc',
					fontSize: 30
				}
			},
			legend: {
				textStyle: {
					color: '#ccc',
				},
				top: 20,
				right: 20,
			},
			tooltip: {
				formatter:'{a}<br>{b} : {c} ({d}%)',
			},
			series: [
				{
					animation:false,

					name: '访问来源',
					type: 'pie',
					data: [
						{ value: 335, name: '直接访问' },
						{ value: 310, name: '邮件营销' },
						{ value: 274, name: '联盟广告' },
						{ value: 235, name: '视频广告' },
						{ value: 400, name: '搜索引擎' }
					].sort(function (a,b){return a.value-b.value}),	//按从小到大的顺序排列 

					legendHoverLink :true,
					hoverAnimation :true,
					hoverOffset :50,
					selectedMode :'multiple',
					selectedOffset:50,
					clockwise :true,
					startAngle :90,
					//minAngle :90,
					minShowLabelAngle:90,

					roseType :'area',

					label :{
						show:true,
						position :'outside',
						fontSize:20,
					},
					labelLine :{
						show:true,
						length :50,
						length2 :30,
						smooth :false,
						lineStyle :{
							width:3,
							color:'#fff',
						}
					},
					itemStyle :{
						borderColor:'green',
						borderWidth:2,
					},
					emphasis :{
						label:{
							fontSize:30,
						},
						labelLine:{
							lineStyle:{
								color:'blue',
							}
						},
						itemStyle:{
							borderWidth:5,
						}
					},

					center :['50%','50%'],
					radius :'75%',
					radius :['65%','20%'],
					label:{
						position:'inside',
					},
					roseType :false,
				}
			]
		});
	</script>
</body>

</html>